<template>
	<view class="mainPage">
		<cu-custom :isBack="true">
			<block slot="content">代理中心</block>
		</cu-custom>
		<view class="padding-sm">
			<view class="flex align-center userinfo padding-top-sm padding-bottom-sm">
				<view class="flex-sub">
					<view class="text-bold text-xs">
						{{ selected.agent_level }}{{ selected.name }}，欢迎回来
					</view>
					<view class="text-xs text-green padding-top-sm" v-if="selected.province_id">{{selected.province}} {{selected.city}} {{selected.area}}</view>
					<view class="text-xs text-grey padding-top-sm" v-if="!selected.state">{{selected.message}}</view>
					<view class="text-xs text-green padding-top-sm" v-else-if="selected.expire_time">{{selected.expire_time}}到期</view>
				</view>
				<text class="themeColor cuIcon-order"
					@tap="showAgentChange()"></text>
			</view>
			<view class="statictis padding-sm margin-bottom">
				<view class="flex align-center">
					<text class="text-bold">数据概览</text>
					<view class="flex-sub"></view>
					<text class="text-xs padding-left-sm padding-right-sm text-gray" v-for="item in dateArr"
						:key="item.value" :class="{ 'themeColor': search.date === item.value }"
						@tap="setSearch('date', item.value)">{{ item.title }}</text>
				</view>
				<view class="padding-top grid col-3">
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.order_num) }}</text>
							<view class="text-xs">订单量</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.order_price) }}</text>
							<view class="text-xs">订单额</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.duration) }}</text>
							<text class="text-xs">分钟</text>
							<view class="text-xs">服务时长</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ statistics.new_customers }}</text>
							<view class="text-xs">新客</view>
						</view>
					</view>
					<view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ $utils.formatNumber(statistics.commission) }}</text>
							<view class="text-xs">分佣</view>
						</view>
					</view>
					<!-- <view class="padding-sm text-center">
						<view class="bg-f5f5f7 padding-sm radius-xl">
							<text class="text-xl themeColor">{{ statistics.browse_num }}</text>
							<view class="text-xs">浏览量</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="padding-xs radius-xl bg-white menu">
				<view class="padding-sm padding-left">常用功能</view>
				<view class="grid col-4 padding-xs text-center list">
					<view class="item margin-bottom" v-for="(item, index) in menu" :key="index"
						@tap="$utils.$page.open(item.page, true)" v-if="item.auth ? $utils.$auth.auth(item.auth) : true">
						<image :src="item.icon" mode=""></image>
						<view class="text-sm text-black">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="agentShow" keyName="title"
			:columns="[agent]" confirmColor="var(--theme-color)"
			@cancel="agentClose" @confirm="agentConfirm">
		</u-picker>
		<loading v-if="pageLoading" />
	</view>
</template>

<script>
import {
	mapState
} from 'vuex'
export default {
	data() {
		return {
			agent:[],
			pageLoading:true,
			agentShow:false,
			selected:{
				id:'',
				name:'',
				agent_level:''
			},
			search: {
				date: 'day',
				agent_id:''
			},
			dateArr: [{
				title: '今日',
				value: 'day'
			},
			{
				title: '昨日',
				value: 'yesterday'
			},
			{
				title: '本周',
				value: 'week'
			},
			{
				title: '本月',
				value: 'month'
			},
			{
				title: '上月',
				value: 'last_month'
			}
			],
			statistics: {
				order_num: '--',
				order_price: '--',
				duration: '--',
				new_customers: '--',
				commission: '--',
				browse_num: '--',
			},
			menu: [
				{
					name: '财务明细',
					icon: require('@/static/image/my/bill.png'),
					page: '/agent/pages/user/wallet/log'
				},
				{
					name: '提现',
					icon: require('@/static/image/my/withdrawal.png'),
					page: '/agent/pages/user/wallet/withdrawal'
				},
			],
		}
	},
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	onLoad(){
		this.getAgent();
	},
	methods: {
		getAgent(){
			this.$utils.$api.Agent.user().then((data)=>{
				this.agent=data;
				if(this.agent.length>0){
					this.agentChange(0);
				}
			}).catch((err)=>{
			}).finally(()=>{
				this.pageLoading=false;
			})
		},
		agentConfirm(e) {
			this.agentShow = false;
			this.agentChange(e.indexs[0]);
		},
		agentClose(e) {
			this.agentShow = false;
		},
		showAgentChange(){
			this.agentShow = true;
		},
		agentChange(index){
			this.selected=this.agent[index];
			this.search.agent_id=this.selected.id;
			this.getStatistics();
		},
		setSearch(key, val) {
			this.search[key] = val;
			this.getStatistics();
		},
		getStatistics(){
			this.$utils.$api.Agent.statistics(this.search).then(data => {
				this.statistics = data;
			})
		}
	}
}
</script>

<style lang="scss">
.statictis {
	background-color: #FFFFFF;
	border-radius: 10px;
}
.cuIcon-order{
	background-color: #FFFFFF;
	transform: rotate(90deg);
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 6px;
}
.menu {
	.list {
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 60upx;
				height: 60upx;
			}
		}
	}
}
</style>
